<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册 - ApeNixX</title>
    <link rel="shortcut icon" th:href="@{/static/static/images/icon.png}" type="image/x-icon">
    <link th:href="@{/static/admin/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
    <link th:href="@{/static/static/plug/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />

    <!--全局样式表-->
    <link th:href="@{/static/static/css/global.css}" rel="stylesheet" />
    <!--本页样式表-->
    <link th:href="@{/static/static/css/home.css}" rel="stylesheet" />
</head>
<body>
<!-- 导航 -->
<nav th:replace="header::header-nav('aa')">
</nav>

<div class="login-main">
    <header class="layui-elip" style="width: 82%">注册页</header>

    <!-- 表单选项 -->
    <form class="layui-form">
        <div class="layui-input-inline">
            <!-- 手机号 -->
            <!--<div class="layui-inline">手机号:</div>-->
            <div class="layui-inline">
                <i class="layui-icon layui-icon-cellphone"></i>
                <!--<i class="fa fa-mobile  fa-2x" aria-hidden="true"></i>-->
            </div>
            <div class="layui-inline" style="width: 85%">
                <input type="text" id="phone" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="sri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="swr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>



<!--        <div class="layui-inline">-->
<!--            &lt;!&ndash; 验证码 &ndash;&gt;-->
<!--            <div class="layui-inline" style="margin-top: -3%;">-->
<!--                <i class="layui-icon layui-icon-vercode"></i>-->
<!--                &lt;!&ndash;<i class="fa fa-get-pocket" aria-hidden="true"></i>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="layui-input-inline" style="width: 50%;">-->
<!--                <input type="text" id="auth_code" name="phone" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">-->
<!--            </div>-->

<!--            <button type="button" id="msg_btn" class="layui-btn  layui-btn-radius" style="margin-top: -5%;">获取验证码</button>-->


<!--        </div>-->

        <div class="layui-input-inline">
            <!-- 用户名 -->
            <div class="layui-inline">
                <i class="layui-icon layui-icon-username"></i>
            </div>

            <div class="layui-inline" style="width: 85%">
                <input type="text" id="username" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>



            <!-- 密码 -->
        <div class="layui-input-inline">
            <div class="layui-inline">
                <i class="layui-icon layui-icon-password"></i>
            </div>

            <div class="layui-inline" style="width: 85%">
                <input type="password" id="password" name="password" required  lay-verify="required" placeholder="请输入6位以上的密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>
            <!-- 确认密码 -->
        <div class="layui-input-inline">
            <div class="layui-inline">
                <i class="layui-icon layui-icon-password"></i>
            </div>
            <div class="layui-inline" style="width: 85%">
                <input type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 对号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
            </div>
            <!-- 错号 -->
            <div class="layui-inline">
                <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
            </div>
        </div>
        <!--        图形验证码-->

        <div class="layui-input-inline">
            <i class="layui-icon layui-icon-vercode"></i>
            <div class="layui-inline" style="width: 85%">
            <input id="vercode" type="text" style="width: 65%;float: left;" value="" placeholder="请输入验证码" class="layui-input">
                <canvas style="float: right;" id="canvas" width="100" height="43"></canvas>
            </div>


        </div>

        <div class="layui-input-inline login-btn" style="width: 90%">
            <button type="button" id="registerFormBtn" class="layui-btn">注册</button>
        </div>
        <hr style="width: 85%" />
        <p style="width: 85%"><a href="/user/login" class="fl">已有账号？立即登录</a></p>
    </form>

</div>
<!--侧边导航-->
<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
    <li sec:authorize="hasAnyRole('ROLE_USER')" class="layui-nav-item" style="margin-bottom: 30px;">
        <a href="javascript:;" class="blog-user">
            <!--<img th:src="@{/static/static/images/Absolutely.jpg}" alt="Absolutely" title="Absolutely" />-->
            <img style=" width: 40px;height: 40px;border-radius: 50px;" th:src="@{${session.SPRING_SECURITY_CONTEXT.authentication.principal.avatarImgUrl}}" />
            <!--<sec:authentication property="principal.id"/>-->
            <span sec:authentication="name"></span>&nbsp;
        </a>
        <dl class="layui-nav-child">
            <dd><a th:href="@{/user/home}">基本资料</a></dd>
            <dd><a class="news" th:href="@{/user/home}">我的消息</a></dd>
            <dd><a th:href="@{/user/home}">安全设置</a></dd>
            <dd th:if="${session.role=='ROLE_VIP'}"><a th:href="@{/admin/index}">后台管理</a></dd>
            <dd><a th:href="@{/logout}">退出登录</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item">
        <a th:href="@{/article/index/1}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/category/1}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/user/archives}"><i class="fa fa-tags fa-fw"></i>&nbsp;归档</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/user/resource}"><i class="fa fa-road fa-fw"></i>&nbsp;资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/user/timeline}"><i class="fa fa-info fa-fw"></i>&nbsp;点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/user/about}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
    </li>
    <li sec:authorize="anonymous" class="layui-nav-item" style="float: right;">
        <a th:href="@{/user/login}">&nbsp;&nbsp;登录</a>
    </li>
    <li sec:authorize="anonymous" class="layui-nav-item    layui-this" style="float: right;">
        <a th:href="@{/user/register}">&nbsp;&nbsp;注册</a>
    </li>
</ul>

    <script th:src="@{/static/static/plug/layui/layui.js}"></script>
    <!-- 全局脚本 -->
    <script th:src="@{/static/static/js/global.js}"></script>
    <!-- 本页脚本 -->
    <script th:src="@{/static/static/js/register.js}"></script>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

    $(function(){
        var show_num = [];
        draw(show_num);
        var password1 = $('#password');
        var rpwd = $('#rpwd');
        var phone = $('#phone');
        var username = $('#username');
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $("#registerFormBtn").on('click',function(){
            var val = $("#vercode").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('请输入验证码！');
            }else if(val == num&& password1.hasClass("password_success") && rpwd.hasClass("rpwd_success")&&phone.hasClass("phone_success")&&username.hasClass("username_success")){
                $.ajax({
                    type: 'post',
                    url: '/register',
                    dataType: 'json',
                    data: {
                        username: $('#username').val(),
                        password: $('#password').val(),
                        phone: $('#phone').val()
                    },
                    success: function (data) {
                        if (data.status == 200) {
                            layer.msg('注册成功', {icon: 6});
                            setTimeout(function () {
                                location.href = "/user/login";
                            }, 1000)
                        } else if (data.status == 44) {
                            layer.msg('验证码错误', {icon: 5});
                        } else if (data.status == 55) {
                            layer.msg('用户名重复', {icon: 5});
                        } else {
                            layer.msg('手机号错误', {icon: 5});
                        }
                    }
                })

                $(".input-val").val('');
                draw(show_num);

            }else{
                alert('验证码或其他字段输入错误！请重新输入！');
                $("#vercode").val('');
                draw(show_num);
            }


        })
    })

    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>



</html>